<template>
  <div class="page-x create-graph-from-drag-x">
    <div class="create-graph-from-drag-content-x">
      <div class="head-panel" id="headPanel">
        <!-- 左侧面板 -->
        <icon-panel @canvas-add-node="canvasAddNode" />
      </div>
      <!-- 画布挂载节点 -->
      <div class="g6-x" id="containerG6"></div>
    </div>
  </div>
</template>

<script>
import G6 from '@antv/g6'
import IconPanel from './IconPanel'

export default {
  name: 'CreateGraphFromDrag',
  components: {
    IconPanel
  },
  data() {
    return {
      graph: null,
      canvasOffset: {
        x: 0,
        y: 0,
        dx: 0,
        dy: 0
      },
      currentZoom: 1
    }
  },
  methods: {
    createGraphic() {
      const graph = new G6.Graph({
        container: containerG6,
        width: containerG6.offsetWidth - 2,
        height: containerG6.offsetHeight - 7,
        modes: {
          // 内置 Behavior https://g6.antv.vision/zh/docs/manual/middle/states/defaultBehavior#%E5%86%85%E7%BD%AE-behavior
          // 'zoom-canvas'
          default: ['drag-canvas', 'drag-node', 'brush-select']
        },
        defaultNode: {
          type: 'rect'
        },
        defaultEdge: {
          type: 'polyline'
        },
        fitCenter: true,
        fitView: true
      })
      this.graph = graph

      this.bindEvents()
    },
    bindEvents() {
      const canvas = containerG6.children[0]
      // 拖拽开始事件
      this.graph.on('dragstart', e => {
        this.canvasOffset.x = e.clientX
        this.canvasOffset.y = e.clientY
      })

      // 拖拽结束事件
      this.graph.on('dragend', e => {
        // console.log(e.clientX - this.canvasOffset.x, e.clientY - this.canvasOffset.y)
        this.canvasOffset.dx += e.clientX - this.canvasOffset.x
        this.canvasOffset.dy += e.clientY - this.canvasOffset.y
        // console.log(this.canvasOffset)

        canvas.setAttribute('dx', this.canvasOffset.dx)
        canvas.setAttribute('dy', this.canvasOffset.dy)
      })

      // 监听缩放
      this.graph.on('wheelzoom', e => {
        console.log(e)
        // console.log(this.graph.getZoom())
        this.currentZoom = this.graph.getZoom()
        console.log(this.currentZoom)
      })
    },
    canvasAddNode(e) {
      // console.log(e)
      // console.log(e.target.getAttribute('data-shape'))

      const shape = e.target.getAttribute('data-shape')
      this.graph.addItem('node', {
        label: shape,
        type: shape,
        x: (e.clientX - this.canvasOffset.dx - 240) / this.currentZoom,
        y: (e.clientY - this.canvasOffset.dy - 52) / this.currentZoom,
        size: [120, 40]
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.createGraphic()
    })
  },
  beforeDestroy() {
    this.graph.destroy()
  }
}
</script>

<style lang="scss" scoped>
.create-graph-from-drag-x {
  box-sizing: border-box;
  padding: 20px;
}

.create-graph-from-drag-content-x {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  display: flex;
}

.head-panel {
  width: 40px;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
}

.g6-x {
  flex: 1;
}
</style>